import React, { useEffect, useState } from 'react'
import { getCityApi ,getCity1Api,getSsApi} from '../../api/request'
import { Grid, IndexBar, List, SearchBar } from 'antd-mobile'
import styles from './city.module.css'
import { EnvironmentOutline } from 'antd-mobile-icons'
import { useDispatch } from 'react-redux'
import { getCity } from '../../store/home'
import { useNavigate } from 'react-router-dom'
function index() {
  const [list,setList]=useState([])
  const [sslist,setSslist]=useState([])
  const [dq,setDq]=useState()
  const dispatch=useDispatch()
  const nav=useNavigate()
  const [sy,setSy]=useState(false)
  const getdata= async()=>{
      const resp=await getCityApi()
      console.log(resp);
      setList(resp.data.data)
      const res=await getCity1Api()
       console.log(res);
       setDq(res.data.data)
  }
  useEffect(()=>{
    getdata()
  },[])
  const dian=(val)=>{
    console.log(val);
    dispatch(getCity(val))
    nav(-1)
  }
  const [lsss,setLsss]=useState(
    JSON.parse(localStorage.getItem('lsss'))||[]
  )
  useEffect(()=>{
    localStorage.setItem('lsss',JSON.stringify(lsss))
  },[lsss])
  const onSearch=async(val)=>{
    console.log(val);
    setLsss(lsss.concat(val))
    const res=await getSsApi(val)
    console.log(res);
    setSslist(res.data.data)
    setSy(true)
  }
  return (
    <div>
      <SearchBar placeholder='请输入城市名' onSearch={onSearch} onClear={()=>setSy(false)}/>
      {
        sy?<div> 
            <List>
              {
              sslist.map((item,index)=>{
                return <List.Item key={index} onClick={()=>dian(item.name)}>{item.name}</List.Item>
              })
            }
            </List>
        </div>:<>
        <div style={{display:'flex'}}>
              <h3>历史记录</h3>
              {
                lsss.map((item,index)=>{
                  return <div key={index} onClick={()=>dian(item)}>{item}</div>
                })
              }
            </div>
          <div className={styles.dq}>
        <EnvironmentOutline/>
        <span onClick={()=>dian(dq?.province)}>{dq?.province}</span>
      </div>
      <Grid columns={4}>
            {
              list.hotCities?.map((item,index)=>{
               return <Grid.Item key={index} onClick={()=>dian(item.name)}>
                    {item.name}
                  </Grid.Item> 
              })
            }
        </Grid>
       <div style={{ height:'90vh' }}> 
      <IndexBar>
        {list.cityList?.map(group => {
          const { title, items } = group
          return (
            <IndexBar.Panel
              index={title}
              title={`标题${title}`}
              key={`标题${title}`}
            >
              <List>
                {items.map((item, index) => (
                  <List.Item key={index} onClick={()=>dian(item.name)}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
        </>
      }
    </div>
  )
}

export default index